/**主题颜色切换 */

import { useLayoutStore } from "@/store/layout";

export const mix = (color1, color2, weight) => {
  weight = Math.max(Math.min(Number(weight), 1), 0);
  let r1 = parseInt(color1.substring(1, 3), 16);
  let g1 = parseInt(color1.substring(3, 5), 16);
  let b1 = parseInt(color1.substring(5, 7), 16);
  let r2 = parseInt(color2.substring(1, 3), 16);
  let g2 = parseInt(color2.substring(3, 5), 16);
  let b2 = parseInt(color2.substring(5, 7), 16);
  let r = Math.round(r1 * (1 - weight) + r2 * weight);
  let g = Math.round(g1 * (1 - weight) + g2 * weight);
  let b = Math.round(b1 * (1 - weight) + b2 * weight);
  r = ("0" + (r || 0).toString(16)).slice(-2);
  g = ("0" + (g || 0).toString(16)).slice(-2);
  b = ("0" + (b || 0).toString(16)).slice(-2);
  return "#" + r + g + b;
};

export const changeTheme = () => {
  const $layoutStore = useLayoutStore();
  let color = $layoutStore.theme || "#409eff";
  // let color = "#034F96";
  // 变量前缀
  const pre = "--el-color-primary";
  // 白色混合色
  const mixWhite = "#ffffff";
  // 黑色混合色
  const mixBlack = "#000000";

  const node = document.documentElement;
  for (let i = 1; i < 10; i += 1) {
    node.style.setProperty(`${pre}-light-${i}`, mix(color, mixWhite, i * 0.1));
  }
  // node.style.setProperty("--el-color-primary", mix(color, mixBlack, 0.1));
  node.style.setProperty("--el-color-primary", color);
  node.style.setProperty("--el-color-primary-dark-2", mix(color, mixBlack, 0.1));
};
